/*
 * 设备账号总览视图
 * @Author: ljb
 * @Date: 2019-03-15 10:15:28
 * @Last Modified by: ljb
 * @Last Modified time: 2019-03-15 17:59:16
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-account-overview-views {
		padding: 20px;
    }
</style>
<template>
	<div class="v-admin-account-overview-views">

		<Tabs
			v-model="tag_name"
			type="card">

			<TabPane
				:label="$t('common.check')"
				name="查看">

				<!-- 搜索组件 -->
				<search-form
					:customers="customers"
					:stores="stores"
					@search="confirmSearch"
				/>

				<account-index
					:loading="table_loading"
					:accounts="accountList"
					@sort="confirmSearch"
					@enable="updateAccountStatus"
					@disable="updateAccountStatus"/>

				<br>

				<!-- 分页组件 -->
				<Row
					type="flex"
					justify="center">
					<Page
						:total="device_accounts.total"
						:current="device_accounts.current_page"
						:page-size="query_info.per_page"
						placement="top"
						show-sizer
						show-total
						@on-change="pageChange"
						@on-page-size-change="perPageChange"/>
				</Row>

			</TabPane>
		</Tabs>

	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapMutations } from 'vuex';

import qs from 'qs';

import { deleteEmptyValue } from 'src/utils/utils';	// 处理空参数

import accountIndex from './index';
import searchForm from './search-form';

export default {
	name: 'AccountOverviewViews',
	components: {
		searchForm,
		accountIndex,
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				account_keyword: '',

				store_id: '',

				customer_id: '',

				enabled: '',

				sort: [],

			}, // 搜索参数

			search_info: {

				page: 1,

				per_page: 20,

			}, // 分页信息

			tag_name: this.$t('common.check'),

			table_loading: false, // 表格更新时的loading

			customers: [],	// 客户列表

			stores: [],	// 店铺列表

			device_accounts: {}, // 操作日志列表
		};
	},
	computed: {
		accountList() {
			return this.device_accounts.data || [];
		},
	},
	mounted() {
		this.fetchCustomerAndStores();
		this.fetchAccount(this.query_info);
	},
	methods: {
		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchAccount(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchAccount(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {Object} param {搜索的参数对象}
         * @return {undefined}
         */
		confirmSearch({
			account_keyword, store_id, customer_id, enabled, order_by, sort,
		}) {
			this.query_info.account_keyword = account_keyword;
			this.query_info.store_id = store_id;
			this.query_info.customer_id = customer_id;
			this.query_info.enabled = enabled;

			const param = {
				order_by,

				sort,
			};	// 排序用的参数

			this.query_info.sort[0] = param;
			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.fetchAccount(this.query_info);
		},

		/**
		 * 更新账号状态
		 * @param  {Object} row {需要更新的当前行对象}
		 */
		updateAccountStatus(row) {
			this.table_loading = true;

			const param = {
				_method: 'PUT',
				enabled: row.enabled ? 0 : 1,
			};

			this.$http.post(`${API_LIST.ADMIN_ACCOUNT_OVERVIEW}/${row.id}`, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					const tips = row.enabled ? this.$t('device.enable_success') : this.$t('device.start_success');
					this.$Message.success(tips);

					row.enabled = !row.enabled;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

		/**
		 * 获取店铺和客户列表
		 */
		fetchCustomerAndStores() {
			this.$http.get(`${API_LIST.ADMIN_ACCOUNT_OVERVIEW}/create`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.customers = data.customers;
					this.stores = data.stores;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				});
		},

		/**
         * 获取账号信息列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchAccount(param) {
			this.table_loading = true;

			const query_str = qs.stringify(deleteEmptyValue(param));

			this.$http.get(`${API_LIST.ADMIN_ACCOUNT_OVERVIEW}?${query_str}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.device_accounts = data.device_accounts;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},
	},
};
</script>
